<template>
  <div class="common-layout" :class="{ 'dark': isDark }">
    <el-container>
      <el-header>
        <el-button type="primary" @click="toggleDark">切换暗黑模式</el-button>
      </el-header>
      <el-container>
        <!-- 侧边菜单栏 -->
        <el-aside width="200px">
          <!-- 侧边滚动条 -->
          <el-scrollbar>
            <!-- 主题 -->
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <template v-for="item in routerLists">
                <template v-if="!item.children">
                  <el-menu-item :index="item.path" :key="item.name">
                    <template #title>
                      <el-icon>
                        <setting />
                      </el-icon>
                      {{ item.mate?.title || item.name }}
                    </template>
                  </el-menu-item>
                </template>
              </template>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>
            <div>@copy by HarmonyOS7</div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'elementPlus',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue';
import { routerList } from '@/router/index';
import { useDark } from '@vueuse/core';
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue';
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const isDark = useDark()
const toggleDark = () => {
  isDark.value = !isDark.value
}


const routerLists = ref<any[]>(routerList)
</script>

<style lang='scss' scoped></style>
